<template>
  <van-popup
    v-model="memberDialog"
    get-container="#app"
    position="right"
    :style="{ width: '100%', height: '100%' }"
  >
    <div class="invite_member_popup">
      <div v-if="inviteMemberLoading" class="page_loading">
        <van-loading size="24px" vertical color="#fff">加载中...</van-loading>
      </div>
      <div class="invite_member_popup_title">
        <van-nav-bar title="邀请人员">
          <template #left>
            <span @click="memberDialog = false">返回</span>
          </template>
        </van-nav-bar>
        <van-field
          v-model="registerByIdCardQO.idCardNumber"
          placeholder="请输入被邀请人证件号码"
        >
          <template #label>
            <van-field
              :value="idCardTypeName"
              readonly
              clickable
              placeholder="证件类型"
              style="padding: 0;"
              input-align="left"
              @click="openSelectBox('idCardCode')"
            />
          </template>
        </van-field>
        <van-field
          v-model="registerByIdCardQO.name"
          placeholder="请输入被邀请人姓名"
        >
          <template #button>
            <van-button size="small" type="info" @click="getMemberList()">查询</van-button>
          </template>
        </van-field>
      </div>
      <div class="invite_member_popup_content">
        <div v-if="memberList.length" class="invite_member_list">
          <div v-for="item in memberList" :key="item.id" class="invite_member_item">
            <van-row class="gl_px_10 gl_py_10">
              <van-col :span="8" align="left">
                <van-image
                  round
                  width="80px"
                  height="80px"
                  :src="getStaticFileUrl(item.imagePath)"
                />
              </van-col>
              <van-col :span="16">
                <div class="name gl_my_5">{{ item.name }}</div>
                <div class="area gl_my_5">证件类型：{{ item.idCardType && item.idCardType.name }}</div>
                <div class="area gl_my_5">证件号码：{{ item.idCardNumber }}</div>
                <div class="area gl_my_5">联系方式：{{ item.phoneNumber }}</div>
                <div class="area gl_my_5">
                  <van-tag v-for="jtem in item.registerTags" :key="jtem.id" class="gl_mr_10 gl_mt_5" size="medium" plain type="primary">
                    {{ jtem.registerTagType && jtem.registerTagType.name }}
                  </van-tag>
                </div>
              </van-col>
            </van-row>
            <van-button type="primary" size="small" :loading="exitBtnLoading" :hairline="true" block @click="handleSubmitInviteOrgan(item)">邀请加入</van-button>
          </div>
        </div>
        <van-empty v-else description="暂无人员数据" />
      </div>
    </div>
    <!-- 下拉选择 -->
    <popup-select
      ref="popupSelect"
      :select-data="selectData"
      :default-code="selectDefaultCode"
      :value-key="valueKey"
      @onConfirm="confirmSelectBox"
    />
  </van-popup>
</template>
<script>
import { mapState } from 'vuex';
import { Api_GET_EventsManagementRegisterByIdCardQO } from '@/lib/form/game/swaggerForm';
import {
  api_GET_EventsManagementRegisterByIdCard,
  api_POST_EventsManagementDelegationInviteRegisterRegisterId
} from '@/extend/api/gameswaggerApi/app';
import PopupSelect from '@/viewMobile/components/PopupSelect';
export default {
  components: {
    PopupSelect
  },
  data() {
    return {
      inviteMemberLoading: false,
      exitBtnLoading: false,
      memberDialog: false,
      registerByIdCardQO: new Api_GET_EventsManagementRegisterByIdCardQO(),
      memberList: [],
      selectBoxCode: '',
      selectDefaultCode: '',
      selectData: [],
      valueKey: 'value'
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      currentUserType: state => state.user.currentUserType
    }),
    idCardTypeName() {
      return this.findDictDataByCode('idCardType', this.registerByIdCardQO.idCardCode).value;
    }
  },
  methods: {
    open() {
      this.resetRegisterByIdCardQO();
      this.memberDialog = true;
    },
    resetRegisterByIdCardQO() {
      this.registerByIdCardQO = new Api_GET_EventsManagementRegisterByIdCardQO();
      this.memberList = [];
    },
    getMemberList() {
      this.inviteMemberLoading = true;
      this.registerByIdCardQO.IncludeIdCardType = true;
      api_GET_EventsManagementRegisterByIdCard(this.registerByIdCardQO).then(res => {
        this.inviteMemberLoading = false;
        this.memberList = res && [res] || [];
        this.dialogLoading = false;
        this.$toast.success('查询成功');
      }, error => {
        this.$toast.fail(error.error.message);
        this.inviteMemberLoading = false;
      });
    },
    // 根据code在相应字典中寻找数据
    findDictDataByCode (dictKey, code) {
      const _dict = this.dict[dictKey];
      if (_dict) {
        return _dict.find(item => item.code === code) || {};
      } else {
        console.log('findDictDataByCode -> findDictDataByCode: ' + dictKey + ', 未找到字典数据.');
        return {};
      }
    },
    openSelectBox(code) {
      // 解决某种情况下弹出框非本系统操作关闭之后无法打开
      this.$refs.popupSelect.close();
      this.selectBoxCode = code;
      this.valueKey = 'value';
      this.selectDefaultCode = this.registerByIdCardQO[code];
      switch (code) {
        // 证件类型
        case 'idCardCode':
          this.selectData = this.dict ? this.dict.idCardType : [];
          break;
        default:
          this.selectData = this.dict ? this.dict[code] : [];
          this.selectDefaultCode = this.registerByIdCardQO[code];
          break;
      }
      this.$refs.popupSelect.open();
    },
    confirmSelectBox(value) {
      switch (this.selectBoxCode) {
        default:
          this.$set(this.registerByIdCardQO, this.selectBoxCode, value.code);
          break;
      }
      console.log(this.registerByIdCardQO);
    },
    // 邀请加入团体
    handleSubmitInviteOrgan(memberInfo) {
      this.inviteMemberLoading = true;
      api_POST_EventsManagementDelegationInviteRegisterRegisterId(memberInfo.id).then(() => {
        this.$emit('refreshPage');
        this.resetRegisterByIdCardQO();
        this.$toast.success('邀请成功');
        this.dialogLoading = false;
        this.inviteMemberLoading = false;
      }, error => {
        this.$toast.fail(error.error.message);
        this.dialogLoading = false;
        this.inviteMemberLoading = false;
      });
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      } else {
        return require('@/assets/images/face_default.png');
      }
    },
    close() {
      this.memberDialog = false;
    }
  }
};
</script>
<style>
.invite_member_item {
  margin: 2px 10px 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.09);
}
.invite_member_item .name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.invite_member_item .area {
  color: #848484;
  font-size: 12px;
}
.invite_member_popup .invite_member_popup_title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 145px;
}
.invite_member_popup  .invite_member_popup_content {
  position: absolute;
  top: 145px;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: auto;
}
.invite_member_list {
  min-height: 100%;
}
.search_input {
  position: relative;
  width: 100%;
  padding: 5px 10px;
}
.search_input input {
  width: 100%;
  height: 40px;
  padding: 2px 40px 2px 20px;
  border: 1px solid #eee;
  border-radius: 5px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
}
.search_input .search_icon {
  position: absolute;
  right: 10px;
  top: 5px;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.search_input input:focus {
  border: 1px solid #1890ff;
}
</style>
